<template>
  <div class="right-container">
    <!--考勤检测-->
    <div class="checkingin">
      <ChartBox title="考勤" height="100%">
        <Checkingin :data="attendanceMonitorInfo"></Checkingin>
      </ChartBox>
    </div>
    <!--  环卫站检测  -->
    <div class="sanitationStation">
      <ChartBox title="日处理量" height="100%">
        <SanitationStation :data="bucketMonitor"></SanitationStation>
      </ChartBox>
    </div>
    <!--  气体检测  -->
    <div class="gas-monitor">
      <ChartBox title="环境检测" height="100%">
        <GasMonitor :data="gasMonitorInfo"></GasMonitor>
      </ChartBox>
    </div>
    <!--  作业检测  -->
    <div class="work">
      <ChartBox title="作业检测" height="100%">
        <Work :data="workMonitorInfo"></Work>
      </ChartBox>
    </div>
  </div>
</template>
<script>
import ChartBox from "@/views/bigScreen/components/ChartBox/index.vue";
import Checkingin from "@/views/bigScreen/components/Right/Checkingin.vue";
import SanitationStation from "@/views/bigScreen/components/Right/SanitationStation.vue";
import Work from "@/views/bigScreen/components/Right/Work.vue";
import GasMonitor from "@/views/bigScreen/components/Right/GasMonitor.vue";

export default {
  name: "BigScreenRight",
  components: {
    ChartBox,
    Checkingin,
    SanitationStation,
    Work,
    GasMonitor,
  },
  props: {
    attendanceMonitorInfo: {
      type: Object,
      default: () => ({}),
    },
    bucketMonitor: {
      type: Object,
      default: () => ({}),
    },
    workMonitorInfo: {
      type: Object,
      default: () => ({}),
    },
    gasMonitorInfo: {
      type: Object,
      default: () => ({}),
    }
  },
  data() {
    return {};
  },
  mounted() {
    window.addEventListener('resize', this.onResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize);
  },
  methods: {
    onResize() {
      this.$bus.$emit('resize');
    },
  },
}
</script>

<style scoped lang="scss">
.right-container {
  height: 100%;
  position: relative;

  .checkingin {
    height: 21%;
  }

  .sanitationStation {
    height: 40%;
  }

  .work {
    height: 16%;
  }

  .gas-monitor {
    height: 23%;
  }
}
</style>
